<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Alata&family=Barlow+Semi+Condensed:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <title>Testimonial Grid</title>
  </head>
  <body class="bg-gray-200">
    <!-- 全局容器 -->
    <div class="container mx-auto max-w-7xl p-2 md:p-10">
      <!-- 网格容器 -->
      <div
        class="grid gap-6 grid-cols-1 text-white md:grid-cols-4 md:grid-rows-2"
      >
        <!-- 盒子1 -->
        <div class="relative p-10 rounded-xl bg-purple-700 md:col-span-2">
          <!-- 引号图片 -->
          <img
            src="/images/bg-pattern-quotation.svg"
            alt=""
            class="absolute top-3 right-10 scale-125 md:top-7 md:right-24 md:scale-150"
          />
          <!-- 盒子头部 -->
          <div class="flex z-10 space-x-4">
            <img
              src="/images/image-daniel.jpg"
              alt=""
              class="w-10 h-10 rounded-full ring-2 ring-purple-300"
            />
            <div class="text-sm">
              <h4 class="opacity-90">丹尼尔·克利福德</h4>
              <p class="opacity-50">已验证的毕业生</p>
            </div>
          </div>
          <!-- 大文本 -->
          <p class="relative z-10 mt-6 text-xl">
            我在中途收到了一份工作机会，我所学的科目在我加入的公司中是最新的，如果不是更多的话。老实说，我觉得我得到了每一分钱的价值。
          </p>
          <!-- 小文本 -->
          <p class="mt-6 opacity-50 line-clamp-6">
            "在加入训练营之前，我已经担任 EMT 多年。
            我一直希望进行过渡，并听说过一些人 在这里的惊人体验。
            我报名参加了免费的入门课程并且发现它非常有趣！不久之后我就报名了。下一个
            12 几周是我一生中最好的——也是最辛苦的——时间。 自从
            完成课程，我已经成功转换职业，作为 VR 初创公司的软件工程师。
            客户很高兴紧随其后的是 adipisicing 开发人员。
            在否认的基础上，因为它是他的职责将追随他，仇恨将驱散受苦者的痛苦
            因此，为了获得快乐，它们是权宜之计或值得称赞的！ 在哪里
            整个跟随所有沙漠？让麻烦是可以预料的，
            看到他被劳动软化了，除了我们之外没有人应该选择任何东西 训练时间！"
          </p>
        </div>
        <!-- 盒子2 -->
        <div class="p-10 rounded-xl bg-gray-600">
          <!-- 盒子头部 -->
          <div class="flex space-x-4">
            <img
              src="/images/image-jonathan.jpg"
              alt=""
              class="w-10 h-10 rounded-full ring-2 ring-purple-300"
            />
            <div class="text-sm">
              <h4 class="opacity-90">乔纳森·沃尔特斯</h4>
              <p class="opacity-50">已验证的毕业生</p>
            </div>
          </div>
          <!-- 大文本 -->
          <p class="mt-6 text-xl">团队非常支持我，让我保持动力</p>
          <!-- 小文本 -->
          <p class="mt-6 opacity-50 line-clamp-6">
            "我从一个几乎没有编码技能的新手开始。 我现在
            在一家大公司担任移动工程师。 这是其中之一我对自己所做的最好的投资。
            客户很高兴 紧随其后的是 adipisicing 开发人员。 他生于真理本身
            他们对我们的事情一无所知，对某些人来说，快乐的事情
            对温柔的人假设或想要什么都不做的必要性，也不是因为
            除非他阻碍赞美他的人，否则这会发生。 为运动做好准备
            现在a的后果是他想做比他大的人次！ "
          </p>
        </div>
        <!-- 盒子3 -->
        <div
          class="hidden p-10 rounded-xl text-gray-900 bg-white md:block md:row-span-2"
        >
          <!-- 盒子头部 -->
          <div class="flex space-x-4">
            <img
              src="/images/image-kira.jpg"
              alt=""
              class="w-10 h-10 rounded-full ring-2 ring-purple-300"
            />
            <div class="text-sm">
              <h4 class="opacity-90">基拉·惠特尔</h4>
              <p class="opacity-50">已验证的毕业生</p>
            </div>
          </div>
          <!-- 大文本 -->
          <p class="mt-6 text-xl">如此改变人生的经历。 强烈推荐！</p>
          <!-- 小文本 -->
          <p class="mt-6 opacity-50">
            "在加入训练营之前，我从未编写过一行代码。我
            需要一些可以帮助我学习的专业人士的结构一步一步编程。前任鼓励我报名
            他们的学生，只能说关于 程序。 整个课程和工作人员并没有让人失望。
            他们 非常亲力亲为，我从来不需要等待很长时间才能获得帮助。 这
            敏捷团队项目尤其突出。
            它花了我的以任何教程都无法做到的方式学习到一个新的水平有。
            事实上，我经常在采访中将其称为我的开发经验的例子。
            它确实帮助我降落了在收到多个 offer 后成为一名全栈开发人员。 100%
            推荐！ "
          </p>
        </div>
        <!-- 盒子4 -->
        <div class="p-10 rounded-xl text-gray-900 bg-white">
          <!-- 盒子头部 -->
          <div class="flex space-x-4">
            <img
              src="/images/image-jeanette.jpg"
              alt=""
              class="w-10 h-10 rounded-full ring-2 ring-purple-300"
            />
            <div class="text-sm">
              <h4 class="opacity-90">珍妮特·哈蒙</h4>
              <p class="opacity-50">已验证的毕业生</p>
            </div>
          </div>
          <!-- 大文本 -->
          <p class="mt-6 text-xl">整体美妙而有益的体验</p>
          <!-- 小文本 -->
          <p class="mt-6 opacity-50 line-clamp-6">
            "感谢您的精彩体验！ 我现在有一份工作，我真的
            享受，并在做我喜欢的事情时过上好日子。 "
          </p>
        </div>
        <!-- 盒子5 -->
        <div class="p-10 rounded-xl bg-gray-900 md:col-span-2">
          <!-- 盒子头部 -->
          <div class="flex space-x-4">
            <img
              src="/images/image-patrick.jpg"
              alt=""
              class="w-10 h-10 rounded-full ring-2 ring-purple-300"
            />
            <div class="text-sm">
              <h4 class="opacity-90">帕特里克·艾布拉姆斯</h4>
              <p class="opacity-50">已验证的毕业生</p>
            </div>
          </div>
          <!-- 大文本 -->
          <p class="mt-6 text-xl">
            来自自己参加训练营的助教的出色教学支持。
            从他们那里获得指导并从他们的经验中学习是简单的。
          </p>
          <!-- 小文本 -->
          <p class="mt-6 opacity-50 line-clamp-6">
            "工作人员似乎真的很关心我的进步，我发现真的很清爽。
            该计划给了我必要的信心能够走出世界，把自己展示为一个有能力的人
            初级开发人员。 标准高于其他标准。 你会得到
            您需要来自令人难以置信的智能社区的个人关注和了不起的人。 "
          </p>
        </div>
        <!-- 盒子6 -->
        <div class="p-10 rounded-xl text-gray-900 bg-white md:hidden">
          <!-- 盒子头部 -->
          <div class="flex space-x-4">
            <img
              src="/images/image-kira.jpg"
              alt=""
              class="w-10 h-10 rounded-full ring-2 ring-purple-300"
            />
            <div class="text-sm">
              <h4 class="opacity-90">基拉·惠特尔</h4>
              <p class="opacity-50">已验证的毕业生</p>
            </div>
          </div>
          <!-- 大文本 -->
          <p class="mt-6 text-xl">如此改变人生的经历。 强烈推荐！</p>
          <!-- 小文本 -->
          <p class="mt-6 opacity-50 line-clamp-6">
            "在加入训练营之前，我从未编写过一行代码。我
            需要一些可以帮助我学习的专业人士的结构一步一步编程。前任鼓励我报名
            他们的学生，只能说关于 程序。 整个课程和工作人员并没有让人失望。
            他们 非常亲力亲为，我从来不需要等待很长时间才能获得帮助。 这
            敏捷团队项目尤其突出。
            它花了我的以任何教程都无法做到的方式学习到一个新的水平有。
            事实上，我经常在采访中将其称为我的开发经验的例子。
            它确实帮助我降落了在收到多个 offer 后成为一名全栈开发人员。 100%
            推荐！ "
          </p>
        </div>
      </div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
